<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识检索 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .fire-red {
            background-color: #e63946;
        }
        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="fire-red text-white shadow-md">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center py-3">
                    <div class="flex items-center">
                        <img src="https://img.icons8.com/color/48/000000/fire-element.png" alt="Logo" class="h-10 w-10 mr-2">
                        <span class="text-xl font-bold">火灾调查知识库平台</span>
                    </div>
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item px-3 py-2 text-white font-medium bg-red-700 rounded">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-robot mr-1"></i> AI检索功能
                        </a>
                        <a href="report.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-cockpit.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                        <a href="user-center.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-user mr-1"></i> 个人中心
                        </a>
                    </nav>
                    <div class="flex items-center space-x-2">
                        <a href="login.html" class="text-white hover:text-gray-200 px-2 py-1">
                            <i class="fas fa-sign-in-alt mr-1"></i> 登录
                        </a>
                        <a href="register.html" class="bg-white text-red-600 hover:bg-gray-100 px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus mr-1"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="container mx-auto px-4 py-8">
            <!-- 搜索区域 -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <div class="mb-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">知识库检索</h2>
                    <div class="flex flex-col md:flex-row gap-4">
                        <div class="flex-1">
                            <input type="text" placeholder="请输入关键词进行检索..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                        </div>
                        <button class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none">
                            <i class="fas fa-search mr-1"></i> 搜索
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">检索范围</label>
                        <div class="space-y-2">
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600" checked>
                                <span class="ml-2">全文</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600">
                                <span class="ml-2">主题</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600">
                                <span class="ml-2">摘要</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600">
                                <span class="ml-2">关键词</span>
                            </label>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">时间范围</label>
                        <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                            <option value="">全部时间</option>
                            <option value="day">过去24小时</option>
                            <option value="week">过去一周</option>
                            <option value="month">过去一个月</option>
                            <option value="year">过去一年</option>
                            <option value="custom">自定义时间范围</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">地区选择</label>
                        <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                            <option value="">全部地区</option>
                            <option value="north">华北地区</option>
                            <option value="east">华东地区</option>
                            <option value="south">华南地区</option>
                            <option value="central">华中地区</option>
                            <option value="northeast">东北地区</option>
                            <option value="southwest">西南地区</option>
                            <option value="northwest">西北地区</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">事故类型</label>
                        <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                            <option value="">全部类型</option>
                            <option value="electrical">电气火灾</option>
                            <option value="chemical">化学品火灾</option>
                            <option value="gas">燃气火灾</option>
                            <option value="industrial">工业火灾</option>
                            <option value="building">建筑火灾</option>
                            <option value="vehicle">交通工具火灾</option>
                            <option value="forest">森林火灾</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- 分类导航 -->
            <div class="mb-6">
                <div class="flex flex-wrap gap-2">
                    <button class="px-4 py-2 bg-red-600 text-white rounded-md">全部</button>
                    <button class="px-4 py-2 bg-white text-gray-700 rounded-md border hover:bg-gray-50">消防法律法规</button>
                    <button class="px-4 py-2 bg-white text-gray-700 rounded-md border hover:bg-gray-50">火调报告</button>
                    <button class="px-4 py-2 bg-white text-gray-700 rounded-md border hover:bg-gray-50">政府文件</button>
                    <button class="px-4 py-2 bg-white text-gray-700 rounded-md border hover:bg-gray-50">消防安全</button>
                    <button class="px-4 py-2 bg-white text-gray-700 rounded-md border hover:bg-gray-50">消防设备</button>
                </div>
            </div>
            
            <!-- 检索结果 -->
            <div class="bg-white rounded-lg shadow-md mb-6">
                <div class="p-4 border-b">
                    <div class="flex justify-between items-center">
                        <div>
                            <h3 class="text-lg font-semibold">检索结果</h3>
                            <p class="text-sm text-gray-500">共找到 <span class="text-red-600 font-medium">128</span> 条相关结果</p>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="flex items-center">
                                <span class="text-sm text-gray-600 mr-2">排序方式：</span>
                                <select class="px-2 py-1 border rounded text-sm focus:outline-none focus:ring-1 focus:ring-red-500">
                                    <option value="relevance">相关度</option>
                                    <option value="time">时间</option>
                                    <option value="hot">热度</option>
                                </select>
                            </div>
                            <div class="flex text-gray-500">
                                <button class="p-1 hover:text-red-600"><i class="fas fa-th-list"></i></button>
                                <button class="p-1 hover:text-red-600"><i class="fas fa-th-large"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 结果列表 -->
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">作者</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">来源</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">热度</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <!-- 结果项 1 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">电气火灾调查分析技术规程</div>
                                    <div class="text-xs text-gray-500 mt-1 line-clamp-1">本规程提供了电气火灾现场勘查与调查的技术方法和程序指导...</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">消防部规范司</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">消防技术标准</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-15</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center text-sm text-yellow-500">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="detail.html" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                    <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                                </td>
                            </tr>
                            
                            <!-- 结果项 2 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">某商场火灾事故调查报告</div>
                                    <div class="text-xs text-gray-500 mt-1 line-clamp-1">本报告详细记录了XX商场火灾的调查过程、起火原因分析及火灾责任认定...</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">北京消防总队</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">火灾调查报告</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-03-21</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center text-sm text-yellow-500">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="detail.html" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                    <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                                </td>
                            </tr>
                            
                            <!-- 结果项 3 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">消防法中对火灾调查的法律规定解读</div>
                                    <div class="text-xs text-gray-500 mt-1 line-clamp-1">对《中华人民共和国消防法》中关于火灾调查的相关条款进行详细解读和分析...</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李明</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">消防法律法规</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-10</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center text-sm text-yellow-500">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                    <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                                </td>
                            </tr>
                            
                            <!-- 结果项 4 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">工业企业防火设计规范</div>
                                    <div class="text-xs text-gray-500 mt-1 line-clamp-1">本规范规定了工业企业防火设计的基本要求，包括消防设施配置、安全疏散等内容...</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">住建部</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">消防设计标准</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2022-12-05</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center text-sm text-yellow-500">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                    <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                                </td>
                            </tr>
                            
                            <!-- 结果项 5 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">新型自动喷水灭火系统技术指南</div>
                                    <div class="text-xs text-gray-500 mt-1 line-clamp-1">详细介绍了新型自动喷水灭火系统的技术特点、安装要求和维护管理...</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张伟</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">消防设备</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-02-18</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center text-sm text-yellow-500">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                    <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="px-6 py-3 flex items-center justify-between border-t">
                    <div class="text-sm text-gray-500">
                        显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">128</span> 条结果
                    </div>
                    <div class="flex items-center space-x-2">
                        <button class="px-3 py-1 rounded border text-gray-500 hover:bg-gray-50">上一页</button>
                        <button class="px-3 py-1 rounded bg-red-600 text-white">1</button>
                        <button class="px-3 py-1 rounded border text-gray-700 hover:bg-gray-50">2</button>
                        <button class="px-3 py-1 rounded border text-gray-700 hover:bg-gray-50">3</button>
                        <button class="px-3 py-1 rounded border text-gray-700 hover:bg-gray-50">4</button>
                        <button class="px-3 py-1 rounded border text-gray-700 hover:bg-gray-50">5</button>
                        <button class="px-3 py-1 rounded border text-gray-500 hover:bg-gray-50">下一页</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部 -->
        <footer class="bg-gray-800 text-white py-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关于我们</h3>
                        <p class="text-gray-400 text-sm">火灾调查知识库平台致力于提供全面的火灾调查知识和智能工具，助力消防安全工作的开展。</p>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">快速链接</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><a href="#" class="hover:text-white">首页</a></li>
                            <li><a href="#" class="hover:text-white">知识检索</a></li>
                            <li><a href="#" class="hover:text-white">知识图谱</a></li>
                            <li><a href="#" class="hover:text-white">火调报告</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">联系我们</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><i class="fas fa-envelope mr-2"></i> contact@firekb.com</li>
                            <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                            <li><i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区学院路消防大厦</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关注我们</h3>
                        <div class="flex space-x-3">
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-qq"></i>
                            </a>
                        </div>
                        <p class="text-gray-400 text-sm mt-3">扫描二维码关注公众号</p>
                    </div>
                </div>
                
                <div class="border-t border-gray-700 mt-8 pt-4 text-center text-gray-400 text-sm">
                    <p>© 2023 火灾调查知识库平台 版权所有</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Vue初始化代码
        const app = Vue.createApp({
            data() {
                return {
                    // 数据
                }
            },
            methods: {
                // 方法
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 